<template>
	<view class="wrapper">
		<view class="user-bg">
			<image src="../../static/images/news-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'个人中心'" :titleColor="'#000'"></custom-nav-bar>
		<view :style="{height: `${customBar}px`}"></view>
		<scroll-view scroll-y="true" class="main-content" :style="{'height': `calc(100vh - ${customBar}px)`}">
			<view class="user-info">
				<view class="left">
					<view class="avatar-box">
						<button open-type="chooseAvatar" class="user-avatar-btn" @chooseavatar="onChooseAvatar">
							<image :src="userAvatarUrl" mode="aspectFill" class="user-avatar"></image>
						</button>
						<image src="../../static/images/user-selectavatar.png" mode="aspectFit" class="icon-select-avatar"></image>
					</view>
					<view class="info-box">
						<view class="nickname-box">
							<input type="nickname" class="nickname-input" placeholder="输入昵称" v-model="nickName" @blur="bindblur" style="display: inline;"></input>
							<image src="../../static/images/user-editor.png" mode="aspectFit" class="icon-user-editor"></image>
						</view>
						<view class="phone-num" v-if="phoneNum">{{formatTel(phoneNum)}}</view>
					</view>
					
				</view>
				<view class="right">
					<view class="rating">97</view>
					<view class="rating-text">我的综合评级</view>
				</view>
			</view>
			<!-- <button open-type="share">分享按钮</button>
			<button open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取手机号码</button> -->
			<swiper class="swiper" @change="swiperChange" 
			:indicator-dots="true" 
			:autoplay="true"
			:interval="3000"
			:circular="true">
				<swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item" @click="navActions(item)">
					<image :src="item.imageUrl" class="nav-img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="frequently-used-text">我的服务</view>
			<view class="my-service">
				<view class="guide">
					<view class="guide-box" v-for="(item, index) in myServiceList" :key="index" @click="helpTools(item)">
						<image :src="item.url" mode="aspectFit" class="guide-img"></image>
						<view class="guide-desc">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="frequently-used-text">其他服务</view>
			<view class="other-service">
				<view class="item" v-for="(item, index) in commonFuncList" :key="index" @click="helpTools(item)">
					<view class="guide-box">
						<image :src="item.url" mode="aspectFit" class="guide-img"></image>
						<view class="guide-desc">{{item.label}}</view>
					</view>
					<view class="right-arrow">
						<image src="../../static/images/user-arrow.png" mode="aspectFit" class="arrow"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	import { uploadAvatarRes } from '../../util/index.js';
	
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			return {
				customBar,
				userAvatarUrl: '../../static/images/default-avatar.png',
				nickName: '',
				navIndex: 0,
				opacityVal: 'transparent',
				phoneNum: '17813008316',
				myServiceList: [{
					url: '../../static/images/user-coupon.png',
					acronym: 'WDKQ',
					label: '福利卡卷'
				},{
					url: '../../static/images/user-rate.png',
					acronym: 'WDPJ',
					label: '综合评级'
				},{
					url: '../../static/images/user-video.png',
					acronym: 'JSSP',
					label: '我的视频'
				},{
					url: '../../static/images/user-list.png',
					acronym: 'WDBD',
					label: '我的榜单'
				}],
				commonFuncList: [{
					url: '../../static/images/user-near.png',
					acronym: 'FJQG',
					label: '附近球馆'
				},{
					url: '../../static/images/user-videopur.png',
					acronym: 'SPTH',
					label: '视频特惠'
				}],
				bannerList: [{
					imageUrl: '../../static/images/logo.png',
				},{
					imageUrl: '../../static/images/logo.png',
				},{
					imageUrl: '../../static/images/logo.png',
				},{
					imageUrl: '../../static/images/logo.png',
				}],
				wxcode: '',
			}
		},
		components: {
			customNavBar,
		},
		onShow() {
		    wx.login({
		    	success: res => {
		    		this.wxcode = res.code;
		    	}
		    })		
		},
		onReady() {
			
		},
		methods: {
			onChooseAvatar(e) {
				console.log('用户头像',e);
				this.showing = true;
				this.userAvatarUrl = e.detail.avatarUrl;
				console.log('用户头像', this.userAvatarUrl);
				uploadAvatarRes(this.userAvatarUrl, 'image').then(res => {
					console.log(res.data.url);
					let imageUrl = res.data.url;
					uni.setStorageSync('userAvatarUrl', imageUrl);
				}).catch(err => {
					uni.hideLoading();
				});
			},
			formatTel(tel) {
				if (!tel) return '';
				let reg = /^(\d{3})\d{6}(\d{2})$/;
				return tel.replace(reg, "\$1******\$2");
			},
			navActions() {},
			swiperChange(e){
				this.navIndex = e.detail.current;
			},
			bindblur(e) {
				this.nickName = e.target.value;
			},
			getphonenumber(e) {
				let wxcode = this.wxcode;
				console.log('手机号信息', e);
				let detail = e.detail;
				if(detail.encryptedData && detail.iv){ //允许
				    console.log('用户允许了....');
					if(wxcode) { //onshow中已获取
						let data = {
							wxcode,
							encryptedData: detail.encryptedData,
							iv: detail.iv
						}
						//uni.showLoading({title:'加载中'});
						
					}else { //由于wx.login没有及时返回code，做出提示
						// uni.showToast({
						// 	title: '似乎出了点问题，请再次点击',
						// 	icon: 'none'
						// })
					}
				}else{ //拒绝
				    console.log('用户拒绝了....');
				}
			},
			getUserAvatar() {
				// 调用uni.getUserInfo方法获取用户信息
				uni.getUserProfile({
				  desc: '获取用户信息',
				  success: (res) => {
					console.log('用户信息', res.userInfo);
					// 获取到用户头像
					const avatar = res.userInfo.avatarUrl;
					this.userAvatarUrl = avatar;
				  },
				  fail: (err) => {
					console.log('获取用户信息失败', err);
				  }
				});
			},
			helpTools(item){
				switch (item.acronym){
					// case 'WDQB': 
					//     uni.navigateTo({
					//     	url: '/pages/myService/myWallet'
					//     });
					//     break;
					case 'WDKQ':
					    uni.navigateTo({
					    	url: '/pages/myService/myCoupon'
					    });
					    break;	
					case 'WDPJ':
					    uni.navigateTo({
					    	url: '/pages/myService/myGrade'
					    });
					    break;
					case 'JSSP':				
					    uni.navigateTo({
					    	url: '/pages/myService/videoUnlock'
					    });
					    break;		
					case 'WDBD':
						uni.navigateTo({
							url: '/pages/myService/myScoreList'
						});
						break;	
						
					//常用功能	
					
					case 'FJQG':
						uni.navigateTo({
							url: '/pages/commonFunc/nearbyClub'
						});
						break;	
						
					case 'SPTH':
						uni.navigateTo({
							url: '/pages/commonFunc/nearbyClub'
						});
						break;		
					
					// case 'XTSZ':
					// 	uni.navigateTo({
					// 		url: '/pages/commonFunc/systemSetting'
					// 	});
					// 	break;	
					// case 'RXDH':
					// 	uni.makePhoneCall({
					// 	    phoneNumber: '',
					// 	});
					// 	break;						
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		position: relative;
		background: #F1F2F6;
		@mixin font-style {
			background: $gradient-color;
			-webkit-background-clip: text;
			color: transparent;
			font-weight: bold;
		}
		.user-bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
			padding: 0 30upx;
			box-sizing: border-box;
			.user-info{
				margin-top: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					flex: 2;
					display: flex;
					align-items: center;
					.avatar-box{
						width: 140upx;
						height: 140upx;
						border-radius: 30upx;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						.user-avatar-btn{
							width: 140upx;
							height: 140upx;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0;
							border-radius: 30upx;
							overflow: hidden;
							.user-avatar{
								width: 100%;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						.icon-select-avatar{
							position: absolute;
							bottom: -6upx;
							right: -6upx;
							width: 38upx;
							height: 38upx;
						}
					}
					.info-box{
						display: flex;
						flex-direction: column;
						margin-left: 40upx;
						.nickname-box{
							display: flex;
							align-items: center;
							.nickname-input{
								width: 150upx;
								font-size: 40upx;
								font-weight: 400;
							}
							.icon-user-editor{
								width: 30upx;
								height: 30upx;
								position: relative;
								
							}
						}
						.phone-num{
							margin-top: 2upx;
							color: $gray-color;
							font-size: 28upx;
						}
					}
					
				}
				.right{
					flex: 1;
					display: flex;
					justify-content: flex-end;
					flex-direction: column;
					align-items: center;
					.rating{
						@include font-style();
						font-size: 48upx;
					}
					.rating-text{
						color: $black-color;
						font-size: 30upx;
						
					}
				}
				
			}
			.swiper{
				margin: 40upx 0;
				width: 100%;
				height: 200upx;
				.swiper-item{
					width: 100%;
					height: 100%;
					border-radius: 20upx;
					display: flex;
					.nav-img{
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
				}
			}
			.frequently-used-text{
				margin-top: 40upx;
				color: $black-color;
				font-size: 34upx;
			}
			.my-service{
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				margin-top: 30upx;
				border-radius: 20upx;
				padding: 4upx 20upx;
				.guide{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					color: #333;
					font-size: 26upx;
					.guide-box{
						width:25%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						margin: 30upx 0;
						position: relative;
						.guide-img{
							width: 60upx;
							height: 60upx;
						}
						.guide-desc{
							margin-top:15upx;
							font-size: 26upx;
						}
						.circle-red{
							position: absolute;
							top: 0;
							right: 30upx;
							width: 15upx;
							height: 15upx;
							background: rgb(255,77,79);
							border-radius: 50%;
						}
					}
				}
			}
			.other-service{
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				margin-top: 30upx;
				border-radius: 20upx;
				padding: 10upx 20upx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx;
					.guide-box{
						display: flex;
						align-items: center;
						.guide-img{
							width: 60upx;
							height: 60upx;
						}
						.guide-desc{
							margin-left: 30upx;
							color: $black-color;
						}
					}
					.right-arrow{
						.arrow{
							width: 46upx;
							height: 46upx;
						}
					}
				}
			}
		}
		
	}

</style>
